<template>
  <div class="page">
    <!-- 底层白色视图div -->
    <div class="player-views">
      <!-- 左中位置 -->
      <div class="player-view left-center">
        <choose-person
          :profile="room2v2.players[stantard[3]-1].profile"
          :nickname="room2v2.players[stantard[3]-1].nickname"
          :charactor="room2v2.players[stantard[3]-1].charactor"
          :leftcard="room2v2.players[stantard[3]-1].pokers.length"
          :blood_limit="room2v2.players[stantard[3]-1].blood_limit"
          :blood="room2v2.players[stantard[3]-1].blood"
          :skill1_name="room2v2.players[stantard[3]-1].skill1_name"
          :skill2_name="room2v2.players[stantard[3]-1].skill2_name"
          :skill3_name="room2v2.players[stantard[3]-1].skill3_name"
          :judge="room2v2.players[stantard[3]-1].judge_name"
          :camp="getCampRelation(stantard[3]-1)"
          :position="stantard[3]"
        />
      </div>
      <!-- 正上位置 -->
      <div class="player-view top-center">
        <choose-person
          :profile="room2v2.players[stantard[2]-1].profile"
          :nickname="room2v2.players[stantard[2]-1].nickname"
          :charactor="room2v2.players[stantard[2]-1].charactor"
          :leftcard="room2v2.players[stantard[2]-1].pokers.length"
          :blood_limit="room2v2.players[stantard[2]-1].blood_limit"
          :blood="room2v2.players[stantard[2]-1].blood"
          :skill1_name="room2v2.players[stantard[2]-1].skill1_name"
          :skill2_name="room2v2.players[stantard[2]-1].skill2_name"
          :skill3_name="room2v2.players[stantard[2]-1].skill3_name"
          :judge="room2v2.players[stantard[2]-1].judge_name"
          :camp="getCampRelation(stantard[2]-1)"
          :position="stantard[2]"
        />
      </div>
      <!-- 右中位置 -->
      <div class="player-view right-center">
        <choose-person
          :profile="room2v2.players[stantard[1]-1].profile"
          :nickname="room2v2.players[stantard[1]-1].nickname"
          :charactor="room2v2.players[stantard[1]-1].charactor"
          :leftcard="room2v2.players[stantard[1]-1].pokers.length"
          :blood_limit="room2v2.players[stantard[1]-1].blood_limit"
          :blood="room2v2.players[stantard[1]-1].blood"
          :skill1_name="room2v2.players[stantard[1]-1].skill1_name"
          :skill2_name="room2v2.players[stantard[1]-1].skill2_name"
          :skill3_name="room2v2.players[stantard[1]-1].skill3_name"
          :judge="room2v2.players[stantard[1]-1].judge_name"
          :camp="getCampRelation(stantard[1]-1)"
          :position="stantard[1]"
        />
      </div>
    </div>
    
    <!-- 路由视图 -->
    <router-view />
  </div>
</template>

<script setup>
import { useRoomStore } from '@/stores/room'
import ChoosePerson from '@/component/game2v2/choose_person.vue'

const roomStore = useRoomStore()

// 获取全局变量
const room2v2 = roomStore.getRoom2V2()
const stantard = roomStore.stantard
const room_id = roomStore.room_id
const mypos = roomStore.mypos

// 获取自己的阵营
const myCamp = room2v2.players[mypos - 1]?.camp || 0

// 判断阵营关系的函数
function getCampRelation(playerIndex) {
  const playerCamp = room2v2.players[playerIndex]?.camp || 0
  return playerCamp === myCamp ? '友' : '敌'
}

// 打印全局变量用于调试
console.log('game-main2v2 - room2v2:', room2v2)
console.log('game-main2v2 - stantard:', stantard)
console.log('game-main2v2 - room_id:', room_id)
console.log('game-main2v2 - mypos:', mypos)
console.log('game-main2v2 - myCamp:', myCamp)

</script>

<style scoped>
.page {
  width: 100vw;
  height: 100vh;
  background-image: url('http://117.72.17.45:5500/data/bks/game_bk.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

/* 玩家视图容器 */
.player-views {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 允许点击穿透到底层 */
}

/* 玩家视图样式 */
.player-view {
  position: absolute;
  width: 200px;
  height: 270px;
  background-color: transparent;
}

/* 左中位置 */
.player-view.left-center {
  left: 20px; /* 向左移动10px */
  top: 50%;
  transform: translateY(-50%);
}

/* 正上位置 */
.player-view.top-center {
  left: 50%;
  top: 20px; /* 向上移动10px */
  transform: translateX(-50%);
}

/* 右中位置 */
.player-view.right-center {
  right: 20px; /* 向右移动10px */
  top: 50%;
  transform: translateY(-50%);
}

.page :deep(router-view) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* 确保路由视图在白色div之上 */
}
</style>


